<script setup lang="ts">
  import { PropType, ref } from "vue";
  import { ElForm, ElFormItem, FormInstance } from "element-plus";
  import Upload from "@/components/Upload.vue";
  defineProps({
    modelValue: { type: Object as PropType<gt.sql.voucher>, default: format.def.voucher, },
    disabled: { type: Boolean, default: false }
  });
  const
    rules = ref<gt.other.ElRules>({
      name: { required: true, message: "名称2-20个字符", trigger: "blur", min: 2, max: 20, },
      sum: {
        required: true, trigger: "change", validator(_, v, c) {
          if (!(v > 0)) {
            return c(new Error("数量过少"));
          }
          c();
        }
      },
      money: {
        required: true, trigger: "change", validator(_rule: obj, value: number, cbk: cbk) {
          if (!(value > 9)) {
            return cbk(new Error("金额过小"));
          }
          if (value < 100) {
            msg("金额不足1元", "warning");
          }
          cbk();
        }
      },
    }),
    entity = ref<FormInstance>();

  defineExpose({
    validate() {
      return new Promise<boolean>((resolve) => {
        if (entity.value) {
          entity.value.validate().then(resolve).catch(() => { resolve(false); });
        } else {
          resolve(false);
        }
      });
    },
    resetFields() { entity.value?.resetFields(); }
  });
</script>
<template>
  <ElForm class="order xw zb" ref="entity" :model="modelValue" :rules="rules" labelWidth="6em">
    <ElFormItem label="id" prop="id"><el-input v-model="modelValue.id" disabled placeholder="系统自动生成" /></ElFormItem>
    <div class="x wf oh">
      <div class="y w50">
        <ElFormItem label="名称" prop="name">
          <el-input v-model="modelValue.name" placeholder="请输入名称" :disabled="disabled" />
        </ElFormItem>
        <ElFormItem label="金额(分)" prop="money">
          <el-input-number v-model="modelValue.money" :min="0" :disabled="disabled" />
        </ElFormItem>
        <ElFormItem label="生成数量" prop="sum">
          <el-input-number v-model="modelValue.sum" :min="0" :disabled="disabled" />
        </ElFormItem>
      </div>
      <ElFormItem label="图片" prop="image" class="fg1 mt1em">
        <Upload v-model="modelValue.image" :disabled="disabled" base64 single />
      </ElFormItem>
    </div>
  </ElForm>
</template>
<style lang="scss" scoped>
  .order {
    position: relative;
    >:not(.wf) {
      width: 49%;
    }
    .tools {
      padding: 0.4em;
      >span {
        flex-shrink: 0;
        margin: 0 1em;
      }
      >.el-select {
        width: 8em;
        flex-shrink: 0;
      }
    }
  }
</style>